<template>
  <div class="top">
    <div class="inpbody">
    <input class="inp" placeholder="placeholder" :style="inputcss[0]" />
    
      <div class="para">
        <div class="slider">
          <div class="tip">边框圆角(px)</div>
          <el-slider v-model="inputradius" max="25"></el-slider>
        </div>
        <div class="slider">
          <div class="tip">内边距(px)</div>
          <el-slider v-model="inputpadding" max="15"></el-slider>         
        </div>
        <el-switch
          v-model="showinputbor"
          active-text="展示边框"
          inactive-text="取消边框"
          active-color="purple"
          inactive-color="black"
          >边框</el-switch
        >
        <el-switch
          v-model="bgparent"
          active-text="背景透明"
          inactive-text="取消透明"
          active-color="purple"
          inactive-color="black"
          style="margin-top:20px"
          >边框</el-switch
        >
        <el-switch
          v-model="showplainstyle"
          active-text="简约样式"
          inactive-text="普通样式"
          active-color="purple"
          inactive-color="black"
          style="margin-top:20px"
          >边框</el-switch
        >
        <div class="colorpickers">
          <div class="picker">
            <el-color-picker v-model="inputbgc" />
            <div class="tip">背景色</div>
          </div>
          <div class="picker">
            <el-color-picker v-model="inputcolor" />
            <div class="tip">文字色</div>
          </div>
          <div class="picker">
            <el-color-picker v-model="inputborcolor" />
            <div class="tip">边框色</div>
          </div>
        </div>
      </div>
    </div>
    <div class="code">
      
      <div class="htmlcode">
        <h3>
          HTML <el-tooltip content="点击复制" placement="right"><el-icon @click="copyhtml"><copy-document /></el-icon></el-tooltip>
        </h3>
        <el-card
          class="card"
          id="htmlcard"
          v-text="myhtml"
          style="padding: 16px"
        ></el-card>
      </div>
      <div class="csscode">
        <h3>
          CSS <el-tooltip content="点击复制" placement="right"><el-icon @click="copycss"><copy-document /></el-icon></el-tooltip>
        </h3>
        <el-card class="card" id="csscard"
          >.myinput {
          <div v-for="(value, name) in inputcss[1]" :key="name">
            {{ name }}: {{ value }};
          </div>
          }</el-card
        >
      </div>
      <button class="mybutton" @click="saveparas">保存参数</button>
    </div>
  </div>
</template>

<script>
import { ElNotification } from "element-plus";
import axios from "axios";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      myhtml:'<input class="myinput" placeholder="placeholder"/>',
      inputradius: "0",
      inputpadding: "6",
      inputbgc: "#B6DDEE",
      inputcolor: "#121616",
      inputborcolor: "#000000",
      showinputbor: true,
      bgparent:false,
      showplainstyle:false,
      inputdisplaycss: {},
    };
  },
  methods: {
    copyhtml() {
      var copyTest = document.getElementById("htmlcard").innerText;
      var inputTest = document.createElement("input");
      inputTest.value = copyTest;
      document.body.appendChild(inputTest);
      //选中新创建的input元素并获取其中的值
      inputTest.select();
      document.execCommand("Copy");
      inputTest.style.display = "none";
      ElMessage({
        message: "复制成功",
        type: "success",
      });
    },
    copycss() {
      var copyTest = document.getElementById("csscard").innerText;
      var inputTest = document.createElement("input");
      inputTest.value = copyTest;
      document.body.appendChild(inputTest);
      //选中新创建的input元素并获取其中的值
      inputTest.select();
      document.execCommand("Copy");
      inputTest.style.display = "none";
      ElMessage({
        message: "复制成功",
        type: "success",
      });
    },
    saveparas() {
      let name = window.localStorage.getItem("curname");
      //如果在没有token的情况下想进入收藏，将提示先登录
      if (window.localStorage.getItem(name) == null) {
        ElNotification({
          title: "当前登录已过期",
          message: "请重新登录以保存参数",
          type: "warning",
          duration: 2000,
          position: "bottom-right",
        });
      } else if (window.localStorage.getItem(name) == "unlogin") {
        ElNotification({
          title: "您还未登录",
          message: "登录后可使用保存参数功能",
          type: "warning",
          duration: 2000,
          position: "bottom-right",
        });
      } else {
        axios
          .get("/store/add", {
            params: {
              html: this.myhtml,
              css: this.inputcss[0],
              displaycss: this.inputcss[1],
              type: "input",
              username: name,
            },
          })
          .then((res) => {
            console.log(res.data);
            if (res.data == "ok") {
              ElNotification({
                title: "保存当前参数成功",
                message: "可点击左侧收藏选项查看",
                type: "success",
                duration: 2000,
              });
            } else {
              ElNotification({
                title: "保存当前参数失败",
                message: "出现未知错误",
                type: "fail",
                duration: 2000,
              });
            }
          });
      }
    },
  },
  computed: {
    inputcss() {
      let inputcss1 = {
        borderRadius: this.inputradius + "px",
        border: "0.8px solid " + this.inputborcolor,
        padding: this.inputpadding+"px",
        backgroundColor: this.inputbgc,
        color: this.inputcolor,
      };      
      let displaycss = {
        height: "15px",
        width: "220px",
        "border-radius": inputcss1.borderRadius,
        "border": inputcss1.border,
        padding: inputcss1.padding,
        "background-color": inputcss1.backgroundColor,
        color: inputcss1.color,
        
        outline: "none",
      };
      if (!this.showinputbor) {
        inputcss1["border"] = "none";
        displaycss["border"] = "none";
      }
      else if(this.showinputbor){
        inputcss1["border"] = "0.8px solid " + this.inputborcolor;
      }
      if (this.bgparent) {
        inputcss1["backgroundColor"] = "transparent"
        displaycss["background-color"] = "transparent"
      }
      if (this.showplainstyle) {
        inputcss1["border"] = "none"
        inputcss1["borderBottom"] = "0.8px solid " + this.inputborcolor
        inputcss1["borderRadius"] = "0"
        inputcss1["backgroundColor"] = "transparent"
        displaycss["border-bottom"] = "0.8px solid " + this.inputborcolor
        delete displaycss["border-radius"]
        displaycss["background-color"] = "transparent"
      }
      console.log(inputcss1)
      return [inputcss1, displaycss];
    },
  },
};
</script>

<style scoped>
.tip {
  font-size: small;
}
.top {
  width: 60%;
  margin: 0 auto;
  display: flex;
}
.inpbody {
  display: flex;
  flex-direction: column;
  width: 60%
}
.para {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80%;
}
.code{
  margin: 28px 70px;
}
.htmlcode{
  margin: 15px;
  font-size: small;
}
.csscode {
  margin: 15px;
  font-size: small;
}
.slider {
  margin-top: 10px;
}
.inp {
  width: 200px;
  outline: none;
  height: 15px;
  margin-bottom: 10px;
  margin-top: 50px;
}
.colorpickers {
  margin-top: 15px; 
  display: flex;
}
.picker {
  margin-right: 20px;
}
.card {
  background-color: rgba(108, 80, 137, 0.3);
  background: rgba(108, 80, 137, 0.3);
  color: azure;
}
.mybutton {
  border-radius: 20px;
  border: none;
  padding: 6px;
  box-shadow: 6px 6px 7px #32114b;
  background-color: #f3ecf7;
  color: #650b96;
  width: 100px;
  text-align: center;
  height: 35px !important;
  outline: none;
  font-weight: bold;
  margin: 15px
}
</style>